<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib  prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<% 
	String issueId = request.getParameter("issueId");
	
%>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title></title>  
    <link rel="stylesheet" href="../css/pintuer.css">
    <link rel="stylesheet" href="../css/admin.css">
    <script src="../js/jquery.js"></script>
    <script src="../js/pintuer.js"></script>  
    <script src="../js/jqPaginator.min.js"></script>  
     <style type="text/css">
		.bubble {
			float: left;
			display: block;
			background: #28aef5;
			line-height: 2.2rem;
			height: 2.2rem;
			border-radius: 1.1rem;
			text-align: center;
			min-width: 9rem;
			color: #fff;
			font-size: .8rem;
			text-decoration: none;
			position: relative;
			margin-right: .35rem;
			padding-bottom:10px;
			margin-left: 40%;
		}
	</style>
    <script type="text/javascript">
	    
	    
		//播放语音
		function playVoice(e){
			//关闭正在播放
			$(".answer").each(function(){
	   			 var data=this.children[0];
				 //console.log($(data).text());
				 if($(data).text()=="正在播放"){
					 stopVoice(data);
				 }
	   			 
				
	   	    });
			
			
			var recordTime=$(e).attr("id");
			
			var playTime=0;
			
			var voice = $(e).children()[0];
			voice.play();
			$($(e).children()[1]).text("正在播放");
			$(e).attr("onclick","stopVoice(this)");
			
			
			interval = setInterval(a, 1000);
			function a(){
				playTime=playTime+1;
				if(recordTime==playTime){
					stopVoice(e);
				}
				
			}
			
		}
		//暂停语音
		function stopVoice(e){
			var voice = $(e).children()[0];
			voice.load();
			$($(e).children()[1]).text("点击播放");
			$(e).attr("onclick","playVoice(this)");
		}
    </script>
</head>
<body>
<form method="post" action="">
  <div class="panel admin-panel">
    <div class="panel-head"><strong class="icon-reorder"> 回答列表</strong></div>
    <div class="padding border-bottom">
      <ul class="search" style="padding-left:10px;">
        <li> <a class="button border-main icon-mail-reply" href="${ctx}/issue/findAllUI"> 返回问题</a> </li>
      </ul>
    </div>
    <input type="hidden" id="issueId" value="<%=issueId%>">
    <table class="table table-hover text-center">
      <tr>
      	<th>ID</th>
        <th>回答内容</th> 
        <th>图片</th>  
        <th>专家微信</th> 
		<th>状态</th> 
        <th>创建时间</th>
		<th width="100">操作</th>
      </tr>      
      <tbody id="content">

      </tbody>
    </table>
  </div>
</form>
</body>
<script type="text/javascript">
function pause(id){
	if(confirm("您确定要停用回答吗?")){
		window.location.href="${ctx }/answer/updateStatus?status=2&id="+id;
	}
}
function start(id){
	if(confirm("您确定要启用吗?")){
		window.location.href="${ctx }/answer/updateStatus?status=1&id="+id;
	}
}
</script>
<script type="text/javascript">
	$(function(){
		var issueId=$("#issueId").val();
		//alert(issueId);
		
		var url="${ctx }/answer/findByIssueId";
		$.post(url,{"issueId":issueId},callback,"json");
		function callback(data){
			
			   var content=eval(data);
			  //alert(content);
			  
			   $("#content").html("");
			   for(var i=0;i<content.length;i++){
	   
				   var rowContent = "<tr>"
					    + "<td>"
                        + content[i].id
                        + "</td>"
                        + "<td class='answer'>"
                        + content[i].answerContent
                        + "</td>"
                        + "<td class='image'>"
                        + content[i].image
                        + "</td>"
                        + "<td>"
                        + content[i].expertEntity.userEntity.wechatId
                        + "</td>"
						+ "<td id='status"+content[i].id+"'>"
                        + content[i].status
                        + "</td>"
                        + "<td>"
                        + content[i].createDateFormat
                        + "</td>"
						+ "<td><div class='button-group' id='auditStatus"+content[i].id+"'> </div></td>"
						+ "</tr>";
				   $("#content").append(rowContent);

					var auditStatus = $("#auditStatus"+content[i].id);
				   if(content[i].status=='1'){
					   $("#status"+content[i].id).html("<font color='green'>正常</font>");
					   auditStatus.append("<a class='button border-red' href='javascript:void(0)' onclick='return pause("+content[i].id+")'><span class='icon-ban'></span> 停用</a>");
				   }else if(content[i].status=='2'){
					   $("#status"+content[i].id).html("<font color='red'>停用</font>");
					   auditStatus.append("<a class='button border-main' href='javascript:void(0)' onclick='return start("+content[i].id+")''><span class='icon-check-circle-o'></span> 启用</a>");
				   }
			   } 
			   
			   //语音
			   $(".answer").each(function(){
		    		
					 var data=$(this).text();
					var array=data.split(';');
					var localId=array[0];
					var recordTime=array[1];
						 //alert(localId);
				        if(data.indexOf('.mp3')!=-1){
				        	
						var html="<span class='bubble' onclick='playVoice(this)' id='"+recordTime+"'><audio src="+localId+" ></audio><span>点击播放</span></span><br />";
				        	$(this).html(html);
				        }
				    });
			   
			   
			   //图片展示
			   $(".image").each(function(){
					var input=$(this);
					var imageId = $(this).text();
					$(input).text("");
					if(imageId!=""){
						var array=imageId.split(";");
						for(var i=1;i<array.length;i++){
							//alert(array[i]);
							
							var tmpl = '<img src=#url#  style="width:50px;height:50px;margin:0px 3px;" class="tips"  data-toggle="hover" data-place="right" data-image="#image#" ></img>';
							tmpl=tmpl.replace("#url#", array[i]);
							//alert(array[i]);
							tmpl=tmpl.replace("#image#", array[i]);
							//alert(tmpl);
							
							$(input).append(tmpl);
							
						}
						
					}
			 });
		}
	})
</script>
</html>